<template>
	<view>
		<!-- #ifdef APP-PLUS -->  
		<view class="status_bar">  
		    <view class="top_view"></view>  
		</view>  
		<!-- #endif -->
		<!-- 自定义导航栏 -->
		<uni-nav-bar :statusBar="false" @clickRight="openAdd">
		<!-- 左边 -->
		<block slot="left">
			<view class="nav-left" >
				<view class="icon iconfont icon-qiandaoicon"></view>
			</view>
		</block>
		<!-- 中间 -->
			<view class="nav-tab-bar u-f-ajc">
				<block v-for="(tab,index) in tabBars" :key="tab.id">
					<view class=" u-f-ajc" 
					:class="{'active':tabIndex==index }"  @tap="changeTab(index)">
					{{tab.name}}
					<view v-if="(tabIndex==index)" class="nav-tab-bar-line"></view>
					</view>
				</block>
			</view>
		<!-- 右边 -->
		<block slot="right">
			<view class="nav-right u-f-ajc" > 
				<view class="icon iconfont icon-xiezi" ></view>
			</view>
		</block>
		</uni-nav-bar>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components:{
			uniNavBar
		},
		data() {
			return {
				tabIndex:1,
				tabBars:[
					{name:"关注",id:"focus"},
					{name:"话题",id:"topic"}
				]
			}
		},
		methods: {
			changeTab(index){
				this.tabIndex=index;
			},
			openAdd(){
				//打开发布页面
				uni.navigateTo({
					url:'../add-input/add-input',
					animationType: 'pop-in',
					animationDuration: 200,
				});
			}
			
		}
	}
</script>

<style>
.status_bar {  
	height: var(--status-bar-height);  
    width: 100%;  
    background-color: #757575;  
}  
.top_view {  
    height: var(--status-bar-height);  
    width: 100%;  
    position: fixed;  
    background-color: #757575;  
    top: 0;  
    z-index: 999;  
}
.nav-right>view,.nav-left>view{
	font-size: 40upx;
}
.nav-left>view{
	color: #FF9619;
}
.nav-left{
	margin-left: 16upx;
}
.nav-right{
	margin-right: -45upx; 
}
.nav-tab-bar{
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	margin-left: -15upx;
}
.nav-tab-bar>view{
	font-size: 32upx;
	padding: 0 15upx;
	font-weight: bold;
	color: #969696;
}
.active{
	color: #333333!important;
}
.nav-tab-bar-line{
	border-bottom: 5upx solid #FEDE33;
	border-top: 5upx solid #FEDE33;
	width: 80upx;
	border-radius: 20upx;
	position: absolute;
	bottom: -5upx;
}
</style>
